<template>
  <view class="box">
    <uv-navbar 
      class="bold-title" 
      title="检疫管理" 
      @leftClick="leftClick"
      :safeAreaInsetTop="true"
      :placeholder="true"
      :height="'44px'"
    ></uv-navbar>
    
    <view class="content-area">
      <view class="record-container">
        <vaccine-record :records="vaccineRecords"></vaccine-record>
      </view>
    </view>
    
    <view class="header">
      <button class="add-button" @click="goToTrace">新增</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import VaccineRecord from '@/components/Quarantinehome/Quarantinehome.vue'; // 引入子组件
import { quarantine } from '@/api/manageLeft.js'; // 引入接口函数
import cowImg from '/static/map/cow.png'; // 确保路径正确
const vaccineRecords = ref([]);

// 获取检疫记录
const fetchQuarantineRecords = async () => {
  try {
    const response = await quarantine();
    if (response.code === 200 && response.data && response.data.quarantine) {
      vaccineRecords.value = response.data.quarantine.map(item => ({
        entries: [
          {
            img: cowImg, // 假设图片路径是固定的
            type: '牲畜编号',
            imei: item.F_IMEI
          }
        ],
        details: [
          { label: '检疫单位', value: item.F_Stand },
          { label: '检疫类型', value: item.F_Title },
          { label: '检疫人员', value: item.F_UserName }
        ],
        operator: item.F_UserName,
        date: new Date(item.F_StTime).toLocaleDateString()
      }));
    } else {
      console.error('接口返回数据格式不正确:', response);
    }
  } catch (error) {
    console.error('获取检疫记录失败:', error);
    uni.showToast({
      title: '获取检疫记录失败',
      icon: 'none',
      duration: 2000
    });
  }
};

// 返回按钮点击事件
const leftClick = () => {
  console.log('返回按钮被点击');
  uni.navigateBack();
};

// 前往追踪页面
const goToTrace = () => {
 uni.navigateTo({
   url:'./quarantineadd'
 });
};

// 页面加载时获取检疫记录
onMounted(() => {
  fetchQuarantineRecords();
});
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.bold-title {
  font-weight: bold;
}

.content-area {
  background-color: #f3f5f8; // 设置背景为浅灰色
  flex: 1; // 确保内容区域占据剩余空间
  padding: 30rpx;
  overflow: auto; // 确保内容可滚动
}

.record-container {
  background-color: transparent; // 确保容器背景是透明的，以显示父组件的背景
}

.header {
  .add-button {
    background-color: #0bcb75;
    color: white;
    border: none;
    border-radius: 8rpx;
    padding: 16rpx;
    width: 100%;
    font-size: 32rpx;
    margin-top: 40rpx;
    position: fixed;
    bottom: 0;
    left: 0;
  }
}
</style>